<template>
  <view class="flex flex-col flex-col-top-center" style="height: 75px">
    <tm-sheet
      :height="60"
      :width="_width"
      :round="24"
      unit="px"
      _class="flex-center flex "
      parenClass="relative"
      class="relative"
      :_style="_styletop"
      :followTheme="_btnTop && props.followTheme"
      :transprent="_transprent"
      :color="props.color"
      :margin="[0, 0]"
      :padding="_padding"
      :shadow="props.shadow"
      :outlined="props.outlined"
      :border="props.border"
      :borderStyle="props.borderStyle"
      :borderDirection="props.borderDirection"
      :linear="props.linear"
      :linearDeep="props.linearDeep"
      @click="itemClick"
    >
      <tm-badge
        :fontSize="20"
        :color="c_font_style.dotColor"
        :eventPenetrationEnabled="true"
        :dot="props.dot"
        :count="props.count"
        :icon="props.dotIcon"
        :maxCount="props.maxCount"
      >
        <view
          :class="[_active ? 'anifun' : '']"
          class="flex flex-col flex-col-center-center"
          :style="{ width: 65 + 'px', height: '30px' }"
        >
          <slot>
            <tm-icon
              :customicon="props.customicon"
              v-if="!_load"
              _style="line-height: 0px;"
              :color="_color"
              :font-size="c_font_style.iconSize"
              :name="
                _active
                  ? c_font_style.icon
                  : c_font_style.unicon || c_font_style.icon
              "
            ></tm-icon>
          </slot>
          <tm-icon
            v-if="_load"
            spin
            _style="line-height: 0px;"
            :color="_color"
            :font-size="c_font_style.iconSize"
            name="tmicon-shuaxin"
          ></tm-icon>
        </view>
      </tm-badge>
      <tm-text
        v-if="c_font_style.text !== ''"
        :color="_color"
        _class="pb-0"
        :font-size="c_font_style.textSize"
        :label="c_font_style.text"
      ></tm-text>
    </tm-sheet>
  </view>
</template>

<script lang="ts" setup>
/**
 * 底部导航栏项目
 * @description 只能放置在tm-tabbar中。
 */
import tmBadge from '../tm-badge/tm-badge.vue';
import tmText from '../tm-text/tm-text.vue';
import tmIcon from '../tm-icon/tm-icon.vue';
import tmSheet from '../tm-sheet/tm-sheet.vue';
import { custom_props } from '../../tool/lib/minxs';
import { useTmpiniaStore } from '../../tool/lib/tmpinia';
import {
  getCurrentInstance,
  computed,
  watchEffect,
  ref,
  provide,
  inject,
  onUpdated,
  onMounted,
  onUnmounted,
  nextTick,
  watch,
  PropType,
  ComponentInternalInstance
} from 'vue';
const store = useTmpiniaStore();
/**
 * click 项目被点击时触发。
 * beforeClick点击切换之前执行，如果返回false或者Promise<false>时，将阻止链接的切换。如果没有提供url链接地地址将只作为切换使用。
 */
const emits = defineEmits(['click', 'beforeClick']);
const proxy = getCurrentInstance()?.proxy ?? null;
const props = defineProps({
  ...custom_props,
  followTheme: {
    type: [Boolean, String],
    default: true
  },
  transprent: {
    type: Boolean,
    default: true
  },
  //背景主题色
  color: {
    type: String,
    default: 'white'
  },
  //默认的文字主题
  fontColor: {
    type: String,
    default: 'grey-darken-1'
  },
  linear: {
    type: String,
    default: ''
  },
  //激活后的主题色。
  activeColor: {
    type: String,
    default: 'primary'
  },
  //当前是否是活动项。
  active: {
    type: Boolean,
    default: false
  },
  //是否开启向上凸起的按钮。
  btnTop: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  //未选中时的图标，如果不填写默认使用相同的图标。
  unicon: {
    type: String,
    default: ''
  },
  textSize: {
    type: Number,
    default: 20
  },
  iconSize: {
    type: Number,
    default: 38
  },
  dot: {
    type: [Boolean],
    default: false
  },
  dotColor: {
    type: [String],
    default: 'red'
  },
  dotIcon: {
    type: [String],
    default: ''
  },
  //如果count为数字时，显示数字角标，如果为string是显示文本角标。
  count: {
    type: [Number, String],
    default: 0
  },
  maxCount: {
    type: [Number],
    default: 99
  },
  url: {
    type: [String],
    default: ''
  },
  //链接打开方式同官方。
  openType: {
    type: String as PropType<
      'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack'
    >,
    default: 'navigate'
  },
  //打开链接之前执行的勾子函数，返回fase阻止打开。也可以返回new Promise.
  beforeClick: {
    type: [Function, Boolean],
    default: () => false
  },
  load: {
    type: [Boolean, String],
    default: false
  },
  //自定项目数据，在执行beforeClick时，会返回给函数内部
  data: {
    type: [Object, String, Number],
    default: () => undefined
  },
  /**是否禁用选项. */
  disabled: {
    type: Boolean,
    default: false
  },
  /**
   * 为了提高响应速度，只有开启了自定图标显示功能才会去解析用户自定义图标规则名称
   */
  customicon: {
    type: Boolean,
    default: false
  }
});
const _btnTop = computed(() => props.btnTop);
const _transprent = computed(() => {
  if (_btnTop.value === true) return false;
  return true;
});
const _styletop = computed(() => {
  if (_btnTop.value !== true) return 'top:15px';
  return 'top:0px';
});

const _padding = computed(() => {
  return [0, 0];
});
const _disabled = computed(() => props.disabled);
const _load = ref(props.load);
const _active = ref(false);
const c_font_style = computed(() => {
  return {
    dotColor: props.dotColor,
    text: props.text,
    icon: props.icon,
    textSize: props.textSize,
    iconSize: props.iconSize,
    unicon: props.unicon
  };
});
const uid = uni.$tm.u.getUid(1);
const tmTabbarWidth = inject(
  'tmTabbarWidth',
  computed(() => 50)
);
const _width = computed(() => {
  if (_btnTop.value === true) return 60;
  return tmTabbarWidth.value;
});
const nowUrl = inject(
  'tmTabbarUrl',
  computed(() => '')
);
const tmTabbarItemList = inject(
  'tmTabbarItemList',
  computed<Array<string | number>>(() => [])
);
const nowUid = inject(
  'tmTabbarUid',
  computed<string | number>(() => '')
);
const tmTabbarItemSafe = inject('tmTabbarItemSafe', false);
const tmTabbarItemActive = inject(
  'tmTabbarItemActive',
  computed(() => -1)
);
const tmTabbarItemAutoSelect = inject(
  'tmTabbarItemAutoSelect',
  computed(() => false)
);
const _color = computed(() => {
  if (_active.value === true && !_btnTop.value) {
    if (store.tmStore.color && props.followTheme) {
      return store.tmStore.color;
    }
    return props.activeColor;
  }
  return props.fontColor;
});

//父级方法。
let parent: any = proxy?.$parent;
while (parent) {
  if (parent?.tmTabbarId == 'tmTabbarId' || !parent) {
    break;
  } else {
    parent = parent?.$parent ?? undefined;
  }
}
if (parent) {
  parent.pushKey(uid);
}
onUnmounted(() => {
  if (parent) {
    parent.delKey(uid);
  }
});

if (tmTabbarItemAutoSelect.value) {
  _active.value = props.active || false;
} else {
  if (tmTabbarItemList.value[tmTabbarItemActive.value] == uid) {
    _active.value = true;
  } else {
    _active.value = false;
  }
}
function setActive() {
  if (nowUid.value == uid) {
    _active.value = true;
  } else {
    _active.value = false;
  }
}

watch([nowUid, () => props.active], () => {
  if (tmTabbarItemAutoSelect.value) {
    setActive();
  }
});
watch(tmTabbarItemActive, () => {
  if (!tmTabbarItemAutoSelect.value) {
    // 非自动选中，通过父组件的active来选中当前。
    if (tmTabbarItemList.value[tmTabbarItemActive.value] == uid) {
      nextTick(() => {
        _active.value = true;
      });
    } else {
      nextTick(() => {
        _active.value = false;
      });
    }
  }
});
watch([() => props.load], () => {
  _load.value = props.load;
});
async function itemClick() {
  if (_load.value || _disabled.value) return;
  if (typeof props.beforeClick === 'function') {
    _load.value = true;
    let p = await props.beforeClick(props.data);
    if (typeof p === 'function') {
      p = await p(props.data);
    }
    _load.value = false;
    if (!p) return;
  }

  emits('click');
  nextTick(() => {
    if (tmTabbarItemAutoSelect.value) {
      if (parent) {
        parent.setNowurl(props.url, uid);
      }
      setActive();
    }
    if (props.url == '') return;
    uni.$tm.u.routerTo(props.url, props.openType);
  });
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
.anifun {
  animation: scale 0.2s ease;
}

@keyframes scale {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* #endif */
</style>
